import { Form, Input, Button, message } from "antd"
import { RegisterDto } from "../../apis"
import { useUserStore } from "../../store/user"
import { useForm } from 'antd/es/form/Form';
import { useState } from "react";
import { useCountdown } from "../../hooks/useCoundown";

const layout1 = {
  labelCol: { span: 5 },
  wrapperCol: { span: 20 }
}

const layout2 = {
  labelCol: { span: 0 },
  wrapperCol: { span: 24 }
}

export function UpdatePassword() {
  const [form] = useForm()

  const { countdown, isCounting, startCountdown } = useCountdown()

  const userStore = useUserStore()
  const [isLoading, setIsLoading] = useState(false)

  const sendCaptcha = async() => {
    // 1. 判断邮箱是否填写
    const email = form.getFieldValue('email')
    if (!email) {
      message.error('请输入邮箱')
      return
    }
    // 2. 验证邮箱格式
    form.validateFields(['email']).catch(() => {
      message.error('请输入正确的邮箱格式')
    })

    // 2. 发送验证码
    const [success] = await userStore.sendUpdatePasswordCaptcha({email})
    if (success) {
      message.success('验证码已发送')
    }

    startCountdown(30)
  }

  const onFnish = async(values: RegisterDto  & {confirmPassword: string}) => {
    if (values.password !== values.confirmPassword) { 
      message.error('两次密码不一致')
      return
    }
    setIsLoading(true)
    await userStore.updatePassword(values)
    setIsLoading(false)
  }

  return (
    <div className="flex justify-center items-center h-svh">
      <div className="w-[500px]  rounded-md p-10 shadow-md bg-white">
        <h2 className="text-2xl text-center mb-10 font-bold">聊天室</h2>
        <Form
          form={form}
          {...layout1}
          onFinish={onFnish}
          colon={false}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: "email", message: '请输入合法邮箱地址!'}
            ]}
          >
            <Input />
          </Form.Item>
          <div className="flex">
            <Form.Item 
              label="验证码"
              name="captcha"
              rules={[
                { required: true, message: '请输入验证码' },
              ]}
              labelCol={{span: 7}}
              className="flex-1"
            >
              <Input />
            </Form.Item>
            <Button type="primary" className="ml-2" disabled={isCounting} onClick={sendCaptcha}>
              {isCounting ? `${countdown}秒后重试` : '发送验证码'}
            </Button>
          </div>
          <Form.Item
            label="新密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirmPassword"
            rules={[{ required: true, message: '请输入确认密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item  {...layout2}>
          <div className="flex justify-between w-full text-blue-500">
              <a href="/register">返回注册</a>
              <a href="/login">返回登录</a>
            </div>
          </Form.Item>
          <Form.Item {...layout2}>
            <Button className='w-full h-[40px]' type="primary" htmlType="submit" disabled={isLoading}>忘记密码</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}